<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <Header />
    <!-- 左侧导航栏 -->
    <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
      <nav class="py-4">
        <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
          <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
            :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
            <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
            <span>{{ menu.name }}</span>
            <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
              :class="{ 'transform rotate-180': menu.expanded }"></i>
          </div>
          <div v-if="menu.expanded" class="bg-gray-900">
            <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
              class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
              :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
              <a v-if="menu.name === '风险研判' && submenu.name === '智能风险评估'"
                href="/intelligent-risk-assessment"
                data-readdy="true" class="text-sm">{{ submenu.name }}</a>
              <a v-else-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm">{{ submenu.name }}</a>
              <span v-else-if="!submenu.link" class="text-sm">{{ submenu.name }}</span>
            </div>
          </div>
        </div>
      </nav>
    </aside>
    <!-- 主内容区域 -->
    <main class="pt-16 pl-64">
      <div class="container mx-auto p-6">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm mb-4 text-gray-500">
          <span>首页</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span>风险研判</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span class="text-blue-600">预警信息推送</span>
        </div>
        <!-- 预警信息筛选区域 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="font-bold text-lg text-gray-800">预警信息筛选</h2>
            <div class="flex space-x-3">
              <button @click="resetFilters"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                <i class="fas fa-undo mr-2"></i> 重置筛选
              </button>
              <button @click="refreshData"
                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                <i class="fas fa-sync-alt mr-2"></i> 刷新数据
              </button>
            </div>
          </div>
          <div class="grid grid-cols-5 gap-4">
            <!-- 预警级别筛选 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">预警级别</label>
              <div class="flex space-x-2">
                 <button 
      v-for="(level, idx) in warningLevels" 
      :key="idx"
      class="px-3 py-1 text-xs rounded !rounded-button whitespace-nowrap cursor-pointer"
      :class="selectedWarningLevel === level.value ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
      @click="handleWarningLevelChange(level.value)">
      {{ level.label }}
    </button>
              </div>
            </div>
            <!-- 区域选择 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">区域选择</label>
              <div class="relative">
                <button @click="toggleAreaDropdown"
                  class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                  <span>{{ selectedArea }}</span>
                  <i class="fas fa-chevron-down text-xs"></i>
                </button>
                <!-- 区域下拉菜单 -->
                <div v-if="showAreaDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                  <div v-for="area in areaOptions" :key="area"
                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="selectArea(area)">
                    {{ area }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 时间范围 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
              <div class="relative">
                <button @click="toggleTimeDropdown"
                  class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                  <span>{{ selectedTimeRange }}</span>
                  <i class="fas fa-calendar-alt text-xs"></i>
                </button>
                <!-- 时间范围下拉菜单 -->
                <div v-if="showTimeDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                  <div v-for="range in timeRangeOptions" :key="range"
                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                    @click="selectTimeRange(range)">
                    {{ range }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 处理状态 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">处理状态</label>
              <div class="relative">
                <button @click="toggleStatusDropdown"
                  class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                  <span>{{ selectedStatus }}</span>
                  <i class="fas fa-chevron-down text-xs"></i>
                </button>
                <!-- 状态下拉菜单 -->
                <div v-if="showStatusDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                  <div v-for="status in statusOptions" :key="status"
                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                    @click="selectStatus(status)">
                    {{ status }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 搜索框 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">关键词搜索</label>
              <div class="relative">
                <input type="text" v-model="searchKeyword" placeholder="搜索预警内容"
                  class="w-full bg-gray-100 border-none rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                  @keyup.enter="handleSearch">
                <i @click="handleSearch"
                  class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 预警信息列表 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="font-bold text-lg text-gray-800">预警信息列表</h2>
            <div class="flex space-x-3">
              <button @click="exportWarningData"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                <i class="fas fa-download mr-2"></i> 导出数据
              </button>
              <button id="addWarningBtn" @click="showAddWarningModal = true"
                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                <i class="fas fa-plus mr-2"></i> 添加预警
              </button>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    预警级别</th>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    预警来源</th>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    预警时间</th>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    预警内容</th>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    影响区域</th>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    处理状态</th>
                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(warning, index) in filteredWarningList" :key="index" class="hover:bg-gray-50">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="warning.levelClass">
                      {{ warning.level }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center"
                        :class="warning.iconBg">
                        <i :class="warning.icon + ' text-white text-xs'"></i>
                      </div>
                      <div class="ml-3">
                        <div class="text-sm font-medium text-gray-900">{{ warning.source }}</div>
                        <div class="text-xs text-gray-500">{{ warning.sourceType }}</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">{{ warning.date }}</div>
                    <div class="text-xs text-gray-500">{{ warning.time }}</div>
                  </td>
                  <td class="px-6 py-4">
                    <div class="text-sm text-gray-900 max-w-xs truncate">{{ warning.content }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">{{ warning.area }}</div>
                    <div class="text-xs text-gray-500">{{ warning.location }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="warning.statusClass">
                      {{ warning.status }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                      <button @click="showWarningDetail(warning)"
                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">查看</button>
                      <button @click="showProcessWarningModal(warning)"
                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">处理</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
         <!-- 分页 -->
    <div class="flex justify-between items-center mt-4">
      <div class="text-sm text-gray-500">显示 {{ (warningCurrentPage - 1) * warningPageSize + 1 }} 至 {{ Math.min(warningCurrentPage * warningPageSize, filteredWarningList.length) }} 条，共 {{
        filteredWarningList.length }} 条</div>
      <div class="flex space-x-1">
        <button @click="warningCurrentPage = Math.max(1, warningCurrentPage - 1)"
          :disabled="warningCurrentPage === 1"
          class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
          :class="warningCurrentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
          上一页
        </button>
        <button v-for="page in warningPageNumbers" :key="page"
          @click="warningCurrentPage = page"
          class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
          :class="page === warningCurrentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
          {{ page }}
        </button>
        <button @click="warningCurrentPage = Math.min(warningTotalPages, warningCurrentPage + 1)"
          :disabled="warningCurrentPage === warningTotalPages"
          class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
          :class="warningCurrentPage === warningTotalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
          下一页
        </button>
      </div>
    </div>
  </div>
        <!-- 添加预警模态框 -->
        <div v-if="showAddWarningModal"
          class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
          <div class="bg-white rounded-lg shadow-xl w-[600px] max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-gray-200 flex justify-between items-center">
              <h3 class="text-xl font-semibold text-gray-800">添加预警信息</h3>
              <button @click="showAddWarningModal = false" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
              </button>
            </div>
            <div class="p-6">
              <form id="addWarningForm" @submit.prevent="handleAddWarning">
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">预警级别</label>
                  <div class="flex space-x-4">
                    <label class="inline-flex items-center">
                      <input type="radio" v-model="newWarning.level" value="高危" class="form-radio text-red-600">
                      <span class="ml-2 text-sm text-gray-700">高危</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="radio" v-model="newWarning.level" value="中危" class="form-radio text-orange-600">
                      <span class="ml-2 text-sm text-gray-700">中危</span>
                    </label>
                    <label class="inline-flex items-center">
                      <input type="radio" v-model="newWarning.level" value="低危" class="form-radio text-yellow-600">
                      <span class="ml-2 text-sm text-gray-700">低危</span>
                    </label>
                  </div>
                </div>
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">预警来源</label>
                  <select v-model="newWarning.source"
                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">请选择预警来源</option>
                    <option value="设备监测">设备监测</option>
                    <option value="安全巡检">安全巡检</option>
                    <option value="环境监测">环境监测</option>
                  </select>
                </div>
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">来源类型</label>
                  <select v-model="newWarning.sourceType"
                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">请选择来源类型</option>
                    <option value="自动监测">自动监测</option>
                    <option value="人工上报">人工上报</option>
                  </select>
                </div>
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">预警内容</label>
                  <textarea v-model="newWarning.content" rows="3"
                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"
                    maxlength="500" placeholder="请输入预警内容描述"></textarea>
                </div>
                <div class="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">影响区域</label>
                    <input type="text" v-model="newWarning.area"
                      class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"
                      placeholder="请输入影响区域">
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">具体位置</label>
                    <input type="text" v-model="newWarning.location"
                      class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"
                      placeholder="请输入具体位置">
                  </div>
                </div>
              </form>
            </div>
            <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
              <button @click="showAddWarningModal = false"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button whitespace-nowrap">
                取消
              </button>
              <button @click="handleAddWarning"
                class="px-4 py-2 bg-blue-600 text-white rounded !rounded-button whitespace-nowrap">
                确认添加
              </button>
            </div>
          </div>
        </div>
        <!-- 预警统计分析 & 预警推送设置 -->
        <div class="grid grid-cols-2 gap-6 mb-6">
          <!-- 预警统计分析 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-6">
              <h2 class="font-bold text-lg text-gray-800">预警统计分析</h2>
              <div class="flex space-x-2">
                <button v-for="(period, idx) in chartPeriods" :key="idx"
                  class="px-3 py-1 text-xs rounded !rounded-button whitespace-nowrap cursor-pointer"
                  :class="selectedChartPeriod === period.value ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
                  @click="handleChartPeriodChange(period.value)">
                  {{ period.label }}
                </button>
              </div>
            </div>
            <div id="warningTrendChart" class="h-64 mb-4" ref="warningTrendChart"></div>
            <div class="grid grid-cols-2 gap-4">
              <div id="warningSourceChart" class="h-48" ref="warningSourceChart"></div>
              <div id="warningStatusChart" class="h-48" ref="warningStatusChart"></div>
            </div>
          </div>
          <!-- 预警推送设置 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-6">
              <h2 class="font-bold text-lg text-gray-800">预警推送设置</h2>
            </div>
            <!-- 接收人员配置 -->
            <div class="mb-6">
              <h3 class="text-sm font-medium text-gray-700 mb-3">接收人员配置</h3>
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="mb-3">
                  <label class="block text-sm font-medium text-gray-700 mb-1">部门/角色选择</label>
                  <div class="flex flex-wrap gap-2">
                    <div v-for="(dept, idx) in departments" :key="idx"
                      class="px-2 py-1 rounded text-xs flex items-center cursor-pointer"
                      :class="dept.active ? 'bg-blue-100 text-blue-600 border border-blue-300' : 'bg-gray-100 text-gray-600 border border-gray-200'"
                      @click="toggleDepartment(idx)">
                      <span>{{ dept.name }}</span>
                      <i class="fas fa-check ml-1" v-if="dept.active"></i>
                    </div>
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">已选人员 ({{ selectedPersonnel.length
                  }})</label>
                  <div class="flex flex-wrap gap-2">
                    <div v-for="(person, idx) in selectedPersonnel" :key="idx"
                      class="px-2 py-1 rounded text-xs flex items-center cursor-pointer"
                      :class="person.active ? 'bg-blue-100 text-blue-600 border border-blue-300' : 'bg-gray-100 text-gray-600 border border-gray-200'"
                      @click="toggleSelectedPerson(idx)">
                      <i :class="person.icon + ' mr-1'"></i>
                      <span>{{ person.name }}</span>
                      <i class="fas fa-check ml-1" v-if="person.active"></i>
                      <i class="fas fa-times ml-1" v-else></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 推送方式设置 -->
            <div class="mb-6">
              <h3 class="text-sm font-medium text-gray-700 mb-3">推送方式设置</h3>
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="flex flex-col space-y-3">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <i class="fas fa-mobile-alt text-gray-500 mr-2"></i>
                      <span class="text-sm">短信推送</span>
                    </div>
                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
                      <input type="checkbox" id="smsToggle"
                        class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                        checked />
                      <label for="smsToggle"
                        class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                    </div>
                  </div>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <i class="fas fa-envelope text-gray-500 mr-2"></i>
                      <span class="text-sm">邮件推送</span>
                    </div>
                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
                      <input type="checkbox" id="emailToggle"
                        class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                        checked />
                      <label for="emailToggle"
                        class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                    </div>
                  </div>
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <i class="fas fa-bell text-gray-500 mr-2"></i>
                      <span class="text-sm">App 通知</span>
                    </div>
                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
                      <input type="checkbox" id="appToggle"
                        class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                        checked />
                      <label for="appToggle"
                        class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 推送规则配置 -->
            <div>
              <h3 class="text-sm font-medium text-gray-700 mb-3">推送规则配置</h3>
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="mb-3">
                  <label class="block text-sm font-medium text-gray-700 mb-1">按预警级别配置</label>
                  <div class="grid grid-cols-3 gap-2">
                    <div v-for="(level, idx) in pushLevels" :key="idx"
                      class="px-2 py-1 rounded text-xs flex items-center justify-between cursor-pointer"
                      :class="level.active ? level.activeClass + ' border border-gray-300' : 'bg-gray-100 text-gray-600 border border-gray-200'"
                      @click="togglePushLevel(idx)">
                      <span>{{ level.name }}</span>
                      <i class="fas fa-check ml-1" v-if="level.active"></i>
                      <i class="fas fa-times ml-1" v-else></i>
                    </div>
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">按时间段配置</label>
                  <div class="grid grid-cols-2 gap-2">
                    <div class="relative">
                      <input type="text" placeholder="开始时间"
                        class="w-full bg-white border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value="08:00">
                      <i class="fas fa-clock absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <div class="relative">
                      <input type="text" placeholder="结束时间"
                        class="w-full bg-white border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value="20:00">
                      <i class="fas fa-clock absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 预警处理记录 -->
<div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="font-bold text-lg text-gray-800">预警处理记录</h2>
      <div class="flex items-center space-x-3">
        <div class="relative">
          <input type="text" placeholder="搜索处理记录" v-model="processingSearchKeyword"
            class="bg-gray-100 border-none rounded px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
          <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
        <button @click="exportAllProcessingRecords"
          class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
          <i class="fas fa-download mr-2"></i> 导出全部
        </button>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead>
          <tr>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              预警内容</th>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              处理人员</th>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              处理时间</th>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              处理方式</th>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              处理结果</th>
            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              操作</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(record, index) in paginatedProcessingRecords" :key="index" class="hover:bg-gray-50">
            <td class="px-6 py-4">
              <div class="flex items-center">
                <span class="flex-shrink-0 w-2 h-2 rounded-full mr-2" :class="record.levelDotClass"></span>
                <div>
                  <div class="text-sm font-medium text-gray-900 max-w-xs truncate">{{ record.content }}</div>
                  <div class="text-xs text-gray-500">{{ record.area }} · {{ record.time }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div
                  class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                  <i class="fas fa-user"></i>
                </div>
                <div class="ml-3">
                  <div class="text-sm font-medium text-gray-900">{{ record.processor }}</div>
                  <div class="text-xs text-gray-500">{{ record.department }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900">{{ record.processDate }}</div>
              <div class="text-xs text-gray-500">{{ record.processTime }}</div>
            </td>
            <td class="px-6 py-4">
              <div class="text-sm text-gray-900 max-w-xs">{{ record.method }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                :class="record.resultClass">
                {{ record.result }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
              <div class="flex space-x-2">
                <button @click="showProcessingDetail(record)"
                  class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                <button @click="exportProcessingRecord(record)"
                  class="text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap cursor-pointer">导出</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="flex justify-between items-center mt-4">
      <div class="text-sm text-gray-500">显示 {{ (processingCurrentPage - 1) * processingPageSize + 1 }} 至 {{ Math.min(processingCurrentPage * processingPageSize, displayedProcessingRecords.length) }} 条，共 {{
        displayedProcessingRecords.length }} 条</div>
      <div class="flex space-x-1">
        <button @click="processingCurrentPage = Math.max(1, processingCurrentPage - 1)"
          :disabled="processingCurrentPage === 1"
          class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
          :class="processingCurrentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
          上一页
        </button>
        <button v-for="page in processingPageNumbers" :key="page"
          @click="processingCurrentPage = page"
          class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
          :class="page === processingCurrentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
          {{ page }}
        </button>
        <button @click="processingCurrentPage = Math.min(processingTotalPages, processingCurrentPage + 1)"
          :disabled="processingCurrentPage === processingTotalPages"
          class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
          :class="processingCurrentPage === processingTotalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
          下一页
        </button>
      </div>
    </div>
  </div>
      </div>
      <!-- 预警详情模态框 -->
      <div v-if="showDetailModal && selectedWarning"
        class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-[800px] max-h-[90vh] overflow-y-auto">
          <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">预警详情</h3>
            <button @click="showDetailModal = false" class="text-gray-500 hover:text-gray-700">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="p-6">
            <div class="grid grid-cols-2 gap-6 mb-6">
              <div>
                <div class="mb-4">
                  <span class="text-sm text-gray-500">预警级别</span>
                  <div class="mt-1 flex items-center">
                    <span :class="selectedWarning.levelClass + ' px-2 py-1 rounded-full text-xs font-semibold'">
                      {{ selectedWarning.level }}
                    </span>
                  </div>
                </div>
                <div class="mb-4">
                  <span class="text-sm text-gray-500">预警来源</span>
                  <div class="mt-1 flex items-center">
                    <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center"
                      :class="selectedWarning.iconBg">
                      <i :class="selectedWarning.icon + ' text-white text-xs'"></i>
                    </div>
                    <div class="ml-2">
                      <div class="text-sm font-medium text-gray-900">{{ selectedWarning.source }}</div>
                      <div class="text-xs text-gray-500">{{ selectedWarning.sourceType }}</div>
                    </div>
                  </div>
                </div>
                <div class="mb-4">
                  <span class="text-sm text-gray-500">预警时间</span>
                  <div class="mt-1">
                    <div class="text-sm text-gray-900">{{ selectedWarning.date }}</div>
                    <div class="text-xs text-gray-500">{{ selectedWarning.time }}</div>
                  </div>
                </div>
              </div>
              <div>
                <div class="mb-4">
                  <span class="text-sm text-gray-500">影响区域</span>
                  <div class="mt-1">
                    <div class="text-sm text-gray-900">{{ selectedWarning.area }}</div>
                    <div class="text-xs text-gray-500">{{ selectedWarning.location }}</div>
                  </div>
                </div>
                <div class="mb-4">
                  <span class="text-sm text-gray-500">处理状态</span>
                  <div class="mt-1">
                    <span :class="selectedWarning.statusClass + ' px-2 py-1 rounded-full text-xs font-semibold'">
                      {{ selectedWarning.status }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="mb-6">
              <span class="text-sm text-gray-500">预警内容</span>
              <div class="mt-2 p-4 bg-gray-50 rounded-lg text-sm text-gray-900">
                {{ selectedWarning.content }}
              </div>
            </div>
            <div class="mb-6">
              <h4 class="text-sm font-medium text-gray-700 mb-3">处理记录</h4>
              <div class="bg-gray-50 rounded-lg p-4">
                <div v-if="getWarningRecords(selectedWarning).length > 0">
                  <div v-for="(record, index) in getWarningRecords(selectedWarning)" :key="index"
                    class="mb-4 last:mb-0">
                    <div class="flex items-start">
                      <div
                        class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                        <i class="fas fa-user"></i>
                      </div>
                      <div class="ml-3">
                        <div class="text-sm">
                          <span class="font-medium text-gray-900">{{ record.processor }}</span>
                          <span class="text-gray-500 mx-2">·</span>
                          <span class="text-gray-500">{{ record.processDate }} {{ record.processTime }}</span>
                        </div>
                        <div class="mt-1 text-sm text-gray-700">{{ record.method }}</div>
                        <div class="mt-1">
                          <span :class="record.resultClass + ' px-2 py-0.5 rounded-full text-xs font-semibold'">
                            {{ record.result }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="text-sm text-gray-500 text-center py-2">暂无处理记录</div>
              </div>
            </div>
          </div>
          <div class="p-6 border-t border-gray-200 flex justify-between">
            <button @click="showDetailModal = false"
              class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button whitespace-nowrap">
              关闭
            </button>
            <div class="flex space-x-3">
              <button @click="showProcessModal = true"
                class="px-4 py-2 bg-green-600 text-white rounded flex items-center !rounded-button whitespace-nowrap">
                <i class="fas fa-check mr-2"></i>处理预警
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 处理记录详情模态框 -->
      <div v-if="showProcessingDetailModal && selectedProcessingRecord"
        class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-[600px] max-h-[90vh] overflow-y-auto">
          <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">处理记录详情</h3>
            <button @click="showProcessingDetailModal = false" class="text-gray-500 hover:text-gray-700">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="p-6">
            <!-- 预警信息 -->
            <div class="mb-6">
              <h4 class="text-sm font-medium text-gray-700 mb-2">预警信息</h4>
              <div class="bg-gray-50 rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <span :class="selectedProcessingRecord.levelDotClass + ' w-2 h-2 rounded-full mr-2'"></span>
                  <span class="text-sm text-gray-900">{{ selectedProcessingRecord.content }}</span>
                </div>
                <div class="text-xs text-gray-500">
                  {{ selectedProcessingRecord.area }} · {{ selectedProcessingRecord.time }}
                </div>
              </div>
            </div>
            <!-- 处理信息 -->
            <div class="mb-6">
              <h4 class="text-sm font-medium text-gray-700 mb-2">处理信息</h4>
              <div class="space-y-4">
                <div class="flex items-center">
                  <div
                    class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-gray-900">{{ selectedProcessingRecord.processor }}</div>
                    <div class="text-xs text-gray-500">{{ selectedProcessingRecord.department }}</div>
                  </div>
                </div>
                <div>
                  <span class="text-xs text-gray-500">处理时间</span>
                  <div class="text-sm text-gray-900 mt-1">
                    {{ selectedProcessingRecord.processDate }} {{ selectedProcessingRecord.processTime }}
                  </div>
                </div>
                <div>
                  <span class="text-xs text-gray-500">处理方法</span>
                  <div class="text-sm text-gray-900 mt-1 bg-gray-50 p-3 rounded">
                    {{ selectedProcessingRecord.method }}
                  </div>
                </div>
                <div>
                  <span class="text-xs text-gray-500">处理结果</span>
                  <div class="mt-1">
                    <span
                      :class="selectedProcessingRecord.resultClass + ' px-2 py-1 text-xs font-semibold rounded-full'">
                      {{ selectedProcessingRecord.result }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 后续措施 -->
            <div>
              <h4 class="text-sm font-medium text-gray-700 mb-2">后续措施</h4>
              <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
                <i class="fas fa-lightbulb mr-2"></i>
                根据处理结果制定相应的预防措施，加强日常监测和维护，避免类似问题再次发生。
              </div>
            </div>
          </div>
          <div class="p-6 border-t border-gray-200 flex justify-end">
            <button @click="showProcessingDetailModal = false"
              class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button whitespace-nowrap">
              关闭
            </button>
            <div class="flex space-x-3">
              <button @click="showProcessWarningModalFromDetail(selectedProcessingRecord)"
                class="px-4 py-2 bg-green-600 text-white rounded flex items-center !rounded-button whitespace-nowrap">
                <i class="fas fa-check mr-2"></i>处理预警
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 处理预警模态框 -->
      <div v-if="showProcessModal && selectedWarning"
        class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-[600px] max-h-[90vh] overflow-y-auto">
          <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-xl font-semibold text-gray-800">处理预警</h3>
            <button @click="showProcessModal = false" class="text-gray-500 hover:text-gray-700">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="p-6">
            <form id="processWarningForm" @submit.prevent="handleProcessWarning">
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">处理方式</label>
                <select v-model="processForm.method"
                  class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                  <option value="">请选择处理方式</option>
                  <option value="现场处理">现场处理</option>
                  <option value="远程处理">远程处理</option>
                  <option value="委托处理">委托处理</option>
                  <option value="联合处理">联合处理</option>
                </select>
              </div>
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">处理描述</label>
                <textarea v-model="processForm.description" rows="4"
                  class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  maxlength="500" placeholder="请详细描述处理过程和采取的措施"></textarea>
              </div>
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">处理结果</label>
                <div class="flex space-x-4">
                  <label class="inline-flex items-center">
                    <input type="radio" v-model="processForm.result" value="已解决" class="form-radio text-green-600">
                    <span class="ml-2 text-sm text-gray-700">已解决</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="radio" v-model="processForm.result" value="部分解决" class="form-radio text-yellow-600">
                    <span class="ml-2 text-sm text-gray-700">部分解决</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input type="radio" v-model="processForm.result" value="未解决" class="form-radio text-red-600">
                    <span class="ml-2 text-sm text-gray-700">未解决</span>
                  </label>
                </div>
              </div>
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">上传附件</label>
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                  <div class="space-y-1 text-center">
                    <i class="fas fa-upload text-gray-400 text-2xl mb-2"></i>
                    <div class="text-sm text-gray-600">
                      <label for="file-upload"
                        class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500">
                        <span>上传文件</span>
                        <input id="file-upload" name="file-upload" type="file" class="sr-only"
                          @change="handleFileUpload">
                      </label>
                      <p class="text-xs text-gray-500">支持 PDF、Word、Excel、图片等格式</p>
                    </div>
                  </div>
                </div>
                <div v-if="processForm.attachments.length > 0" class="mt-2">
                  <div v-for="(file, index) in processForm.attachments" :key="index"
                    class="flex items-center justify-between text-sm text-gray-500 bg-gray-50 p-2 rounded">
                    <span>{{ file.name }}</span>
                    <button type="button" @click="removeAttachment(index)" class="text-red-500 hover:text-red-700">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
            <button @click="showProcessModal = false"
              class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button whitespace-nowrap">
              取消
            </button>
            <button @click="handleProcessWarning"
              class="px-4 py-2 bg-blue-600 text-white rounded !rounded-button whitespace-nowrap">
              确认处理
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import Header from '../components/Header.vue';
export default {
  components: {
    Header,
  },
  data() {
    return {
      showAddWarningModal: false,
      showDetailModal: false,
      showProcessModal: false,
      showPushModal: false,
      showProcessingDetailModal: false,
      selectedProcessingRecord: {},
      selectedChartPeriod: '7days',
      // 添加搜索关键词
      searchKeyword: '',
      processingSearchKeyword: '',
      appliedProcessingSearchKeyword: '',
// 预警信息分页数据
      warningCurrentPage: 1,
      warningPageSize: 10,
      
      // 处理记录分页数据
      processingCurrentPage: 1,
      processingPageSize: 5,

      // 添加下拉菜单状态控制
      showAreaDropdown: false,
      showTimeDropdown: false,
      showStatusDropdown: false,
       processingSearchKeyword: '',
      processingFilterParams: {
        processor: '',
        date: '',
        result: ''
      },
      // 区域选项
      areaOptions: [
        '全部区域', '炼铁厂', '炼钢厂', '烧结厂', '轧钢厂', '动力厂', '原料厂', '环保设施', '厂区边界'
      ],

      // 时间范围选项
      timeRangeOptions: [
        '近 7 天', '近 30 天', '近 90 天', '近 1 年'
      ],

      // 状态选项
      statusOptions: [
        '全部状态', '待处理', '处理中', '已处理'
      ],
      pushForm: {
        receivers: [],
        methods: [],
        remarks: ''
      },
      selectedWarning: null,
      processForm: {
        method: '',
        description: '',
        result: '',
        attachments: []
      },
      newWarning: {
        level: '',
        source: '',
        sourceType: '',
        content: '',
        area: '',
        location: ''
      },
      mainMenus: [
        {
          name: '监测报警',
          icon: 'fas fa-bell',
          expanded: false,
          active: false,
          subMenus: [
            { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
            { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
            { name: '区域化展示', active: false, link: '/regional-display' }
          ]
        },
        {
          name: '风险研判',
          icon: 'fas fa-exclamation-triangle',
          expanded: true,
          active: true,
          subMenus: [
            { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
            { name: '预警信息推送', active: true, link: '/risk-warning-push' },
            { name: '风险管理与分析', active: false, link: '/risk-analysis' },
            // { name: '重点风险提示', active: false, link: '/focus' },
          ]
        },
        {
          name: '在线巡查',
          icon: 'fas fa-search',
          expanded: false,
          active: false,
          subMenus: [
            { name: '企业信息汇总', active: false, link: '/summary-information' },
            { name: '巡查功能', active: false, link: '/patrol' },
            { name: '检索功能', active: false, link: 'search' },
            { name: '一屏汇聚展示', active: false, link: '/screen-display' }
          ]
        },
        {
          name: '综合分析',
          icon: 'fas fa-chart-line',
          expanded: false,
          active: false,
          subMenus: [
            { name: '联网与设备分析', active: false, link: '/equipment' },
            { name: '应用情况分析', active: false, link: '/application' },
            { name: '数据质量分析', active: false, link: '/data-quality' },
            { name: '定期专题报告', active: false, link: 'report' }
          ]
        },
        {
          name: '系统管理',
          icon: 'fas fa-cog',
          expanded: false,
          active: false,
          subMenus: [
            { name: '用户权限管理', active: false, link: 'user-permission' },
            { name: '系统配置管理', active: false, link: 'system-manage' },
            { name: '数据管理', active: false, link: 'data-manage' },
            { name: '系统监控与维护', active: false, link: 'monitoring' }
          ]
        }
      ],
      warningLevels: [
        { name: '全部', active: true, activeClass: 'bg-blue-100 text-blue-600', dotClass: 'bg-blue-600' },
        { name: '高危', active: false, activeClass: 'bg-red-100 text-red-600', dotClass: 'bg-red-600' },
        { name: '中危', active: false, activeClass: 'bg-orange-100 text-orange-600', dotClass: 'bg-orange-600' },
        { name: '低危', active: false, activeClass: 'bg-yellow-100 text-yellow-600', dotClass: 'bg-yellow-600' }
      ],
      selectedArea: '全部区域',
      selectedTimeRange: '近 1 年',
      selectedStatus: '全部状态',
      warningLevels: [
        { label: '全部', value: 'all' },
        { label: '高危', value: 'high' },
        { label: '中危', value: 'medium' },
        { label: '低危', value: 'low' }
      ],
      selectedWarningLevel: 'all',
      chartPeriods: [
        { label: '近 7 天', value: '7days' },
        { label: '近 30 天', value: '30days' },
        { label: '近 90 天', value: '90days' },
        { label: '近 1 年', value: '1year' }
      ],
      selectedChartPeriod: '7days',
      departments: [
        { name: '安全管理部', active: true },
        { name: '生产运营部', active: true },
        { name: '设备维护部', active: false },
        { name: '质量控制部', active: false },
        { name: '环保监测部', active: true }
      ],
      selectedPersonnel: [
        { name: '张工程师', icon: 'fas fa-user-hard-hat', active: true },
        { name: '李主管', icon: 'fas fa-user-tie', active: true },
        { name: '王经理', icon: 'fas fa-user-tie', active: true },
        { name: '赵工程师', icon: 'fas fa-user-hard-hat', active: true },
        { name: '刘安全员', icon: 'fas fa-user-shield', active: true }
      ],
      pushLevels: [
        { name: '高危预警', active: true, activeClass: 'bg-red-100 text-red-600' },
        { name: '中危预警', active: true, activeClass: 'bg-orange-100 text-orange-600' },
        { name: '低危预警', active: false, activeClass: 'bg-yellow-100 text-yellow-600' }
      ],
      warningList: [
        {
          level: '高危',
          levelClass: 'bg-red-100 text-red-800',
          source: '设备监测',
          sourceType: '自动监测',
          icon: 'fas fa-cogs',
          iconBg: 'bg-red-600',
          date: '2025-10-08',
          time: '09:15:32',
          content: '3号高炉冷却系统温度异常，超过安全阈值20%，存在设备损坏风险',
          area: '炼铁厂',
          location: '3号高炉',
          status: '待处理',
          statusClass: 'bg-yellow-100 text-yellow-800'
        },
        {
          level: '高危',
          levelClass: 'bg-red-100 text-red-800',
          source: '安全巡检',
          sourceType: '人工上报',
          icon: 'fas fa-user-hard-hat',
          iconBg: 'bg-blue-600',
          date: '2025-10-08',
          time: '08:45:17',
          content: '2号转炉区域发现气体泄漏，现场检测氧气浓度低于标准值，需立即处理',
          area: '炼钢厂',
          location: '2号转炉',
          status: '处理中',
          statusClass: 'bg-blue-100 text-blue-800'
        },
        {
          level: '中危',
          levelClass: 'bg-orange-100 text-orange-800',
          source: '环境监测',
          sourceType: '自动监测',
          icon: 'fas fa-cloud',
          iconBg: 'bg-green-600',
          date: '2025-09-08',
          time: '07:30:45',
          content: '烧结机废气处理系统效率下降，排放指标接近限值，需检查维护',
          area: '烧结厂',
          location: '1号烧结机',
          status: '已处理',
          statusClass: 'bg-green-100 text-green-800'
        },
        {
          level: '中危',
          levelClass: 'bg-orange-100 text-orange-800',
          source: '设备监测',
          sourceType: '自动监测',
          icon: 'fas fa-cogs',
          iconBg: 'bg-red-600',
          date: '2025-09-07',
          time: '16:20:11',
          content: '热轧生产线轧机传动系统振动异常，超过预警阈值15%',
          area: '轧钢厂',
          location: '热轧生产线',
          status: '待处理',
          statusClass: 'bg-yellow-100 text-yellow-800'
        },
        {
          level: '高危',
          levelClass: 'bg-red-100 text-red-800',
          source: '安全巡检',
          sourceType: '人工上报',
          icon: 'fas fa-user-hard-hat',
          iconBg: 'bg-blue-600',
          date: '2025-08-07',
          time: '15:05:38',
          content: '锅炉房蒸汽管道压力异常，安全阀响应迟缓，存在爆管风险',
          area: '动力厂',
          location: '锅炉房',
          status: '处理中',
          statusClass: 'bg-blue-100 text-blue-800'
        },
        {
          level: '低危',
          levelClass: 'bg-yellow-100 text-yellow-800',
          source: '环境监测',
          sourceType: '自动监测',
          icon: 'fas fa-cloud',
          iconBg: 'bg-green-600',
          date: '2025-08-07',
          time: '14:15:22',
          content: '厂区东北角噪声监测点数值超标5dB，需排查噪声源',
          area: '厂区边界',
          location: '东北角',
          status: '已处理',
          statusClass: 'bg-green-100 text-green-800'
        },
        {
          level: '中危',
          levelClass: 'bg-orange-100 text-orange-800',
          source: '设备监测',
          sourceType: '自动监测',
          icon: 'fas fa-cogs',
          iconBg: 'bg-red-600',
          date: '2025-07-07',
          time: '11:40:56',
          content: '连铸机冷却水系统压力波动，冷却效率降低，影响产品质量',
          area: '炼钢厂',
          location: '连铸机',
          status: '已处理',
          statusClass: 'bg-green-100 text-green-800'
        },
        {
          level: '低危',
          levelClass: 'bg-yellow-100 text-yellow-800',
          source: '安全巡检',
          sourceType: '人工上报',
          icon: 'fas fa-user-hard-hat',
          iconBg: 'bg-blue-600',
          date: '2025-07-07',
          time: '10:25:19',
          content: '原料堆场防尘网部分破损，大风天气可能导致粉尘飞扬',
          area: '原料厂',
          location: '堆场',
          status: '待处理',
          statusClass: 'bg-yellow-100 text-yellow-800'
        },
        {
          level: '中危',
          levelClass: 'bg-orange-100 text-orange-800',
          source: '环境监测',
          sourceType: '自动监测',
          icon: 'fas fa-cloud',
          iconBg: 'bg-green-600',
          date: '2025-07-06',
          time: '16:50:33',
          content: '废水处理站COD在线监测数值波动，接近排放上限',
          area: '环保设施',
          location: '废水处理站',
          status: '已处理',
          statusClass: 'bg-green-100 text-green-800'
        },
        {
          level: '高危',
          levelClass: 'bg-red-100 text-red-800',
          source: '设备监测',
          sourceType: '自动监测',
          icon: 'fas fa-cogs',
          iconBg: 'bg-red-600',
          date: '2025-07-06',
          time: '14:10:45',
          content: '高压配电室1号变压器温度异常升高，达到预警温度，需紧急检查',
          area: '动力厂',
          location: '配电室',
          status: '已处理',
          statusClass: 'bg-green-100 text-green-800'
        }
      ],
      processingRecords: [
        {
          content: '3号高炉冷却系统温度异常，超过安全阈值20%，存在设备损坏风险',
          levelDotClass: 'bg-red-600',
          area: '炼铁厂',
          time: '2025-07-08 09:15:32',
          processor: '张工程师',
          department: '设备维护部',
          processDate: '2025-07-08',
          processTime: '10:25:18',
          method: '紧急调整冷却水流量，更换损坏的冷却管道，增加监测点',
          result: '已解决',
          resultClass: 'bg-green-100 text-green-800'
        },
        {
          content: '2号转炉区域发现气体泄漏，现场检测氧气浓度低于标准值，需立即处理',
          levelDotClass: 'bg-red-600',
          area: '炼钢厂',
          time: '2025-07-08 08:45:17',
          processor: '李主管',
          department: '安全管理部',
          processDate: '2025-07-08',
          processTime: '09:30:42',
          method: '疏散现场人员，关闭相关阀门，检修泄漏点，恢复正常生产',
          result: '处理中',
          resultClass: 'bg-blue-100 text-blue-800'
        },
        {
          content: '烧结机废气处理系统效率下降，排放指标接近限值，需检查维护',
          levelDotClass: 'bg-orange-600',
          area: '烧结厂',
          time: '2025-07-08 07:30:45',
          processor: '刘安全员',
          department: '环保监测部',
          processDate: '2025-07-08',
          processTime: '08:45:10',
          method: '清洗过滤装置，更换损坏部件，调整工艺参数，恢复处理效率',
          result: '已解决',
          resultClass: 'bg-green-100 text-green-800'
        },
        {
          content: '热轧生产线轧机传动系统振动异常，超过预警阈值15%',
          levelDotClass: 'bg-orange-600',
          area: '轧钢厂',
          time: '2025-07-07 16:20:11',
          processor: '赵工程师',
          department: '设备维护部',
          processDate: '2025-07-07',
          processTime: '17:40:25',
          method: '检查传动系统，更换磨损轴承，调整传动装置平衡，加强润滑',
          result: '部分解决',
          resultClass: 'bg-yellow-100 text-yellow-800'
        },
        {
          content: '锅炉房蒸汽管道压力异常，安全阀响应迟缓，存在爆管风险',
          levelDotClass: 'bg-red-600',
          area: '动力厂',
          time: '2025-07-07 15:05:38',
          processor: '王经理',
          department: '生产运营部',
          processDate: '2025-07-07',
          processTime: '16:15:33',
          method: '降低锅炉负荷，检修安全阀，更换老化管道，恢复正常运行',
          result: '处理中',
          resultClass: 'bg-blue-100 text-blue-800'
        },
         {
          content: '原料堆场防尘网部分破损，大风天气可能导致粉尘飞扬',
          levelDotClass: 'bg-yellow-600',
          area: '原料厂',
          time: '2025-07-07 10:25:19',
          processor: '张工程师',
          department: '设备维护部',
          processDate: '2025-07-07',
          processTime: '11:30:45',
          method: '更换破损防尘网，加强日常巡检频率',
          result: '已解决',
          resultClass: 'bg-green-100 text-green-800'
        },
        {
          content: '废水处理站COD在线监测数值波动，接近排放上限',
          levelDotClass: 'bg-orange-600',
          area: '环保设施',
          time: '2025-07-06 16:50:33',
          processor: '刘安全员',
          department: '环保监测部',
          processDate: '2025-07-06',
          processTime: '17:45:20',
          method: '校准监测设备，检查处理工艺，调整加药量',
          result: '已解决',
          resultClass: 'bg-green-100 text-green-800'
        },
        {
          content: '高压配电室1号变压器温度异常升高，达到预警温度，需紧急检查',
          levelDotClass: 'bg-red-600',
          area: '动力厂',
          time: '2025-07-06 14:10:45',
          processor: '赵工程师',
          department: '设备维护部',
          processDate: '2025-07-06',
          processTime: '15:20:30',
          method: '停机检查变压器，更换绝缘油，加强通风散热',
          result: '已解决',
          resultClass: 'bg-green-100 text-green-800'
        },
      ]
    };
  },
  computed: {
    // 预警信息分页相关计算属性
    warningTotalPages() {
      return Math.ceil(this.filteredWarningList.length / this.warningPageSize);
    },
    
    paginatedWarningList() {
      const startIndex = (this.warningCurrentPage - 1) * this.warningPageSize;
      const endIndex = startIndex + this.warningPageSize;
      return this.filteredWarningList.slice(startIndex, endIndex);
    },
    
    warningPageNumbers() {
      const pages = [];
      const maxVisiblePages = 5;
      
      let startPage = Math.max(1, this.warningCurrentPage - Math.floor(maxVisiblePages / 2));
      let endPage = startPage + maxVisiblePages - 1;
      
      if (endPage > this.warningTotalPages) {
        endPage = this.warningTotalPages;
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }
      
      return pages;
    },
    
    // 处理记录分页相关计算属性
    processingTotalPages() {
      return Math.ceil(this.displayedProcessingRecords.length / this.processingPageSize);
    },
    
    paginatedProcessingRecords() {
      const startIndex = (this.processingCurrentPage - 1) * this.processingPageSize;
      const endIndex = startIndex + this.processingPageSize;
      return this.displayedProcessingRecords.slice(startIndex, endIndex);
    },
    
    processingPageNumbers() {
      const pages = [];
      const maxVisiblePages = 5;
      
      let startPage = Math.max(1, this.processingCurrentPage - Math.floor(maxVisiblePages / 2));
      let endPage = startPage + maxVisiblePages - 1;
      
      if (endPage > this.processingTotalPages) {
        endPage = this.processingTotalPages;
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }
      
      return pages;
    },
    // 添加筛选后的处理记录计算属性
     displayedProcessingRecords() {
      let filtered = [...this.processingRecords];
      
      // 按关键词搜索
      if (this.appliedProcessingSearchKeyword) {
        const keyword = this.appliedProcessingSearchKeyword.toLowerCase();
        filtered = filtered.filter(record => 
          record.content.toLowerCase().includes(keyword) ||
          record.processor.toLowerCase().includes(keyword) ||
          record.department.toLowerCase().includes(keyword) ||
          record.method.toLowerCase().includes(keyword) ||
          record.result.toLowerCase().includes(keyword)
        );
      }
      
      return filtered;
    },
    // 添加筛选后的预警列表计算属性
    filteredWarningList() {
      let filtered = [...this.warningList];

      // 按预警级别筛选
      if (this.selectedWarningLevel !== 'all') {
        const levelMap = {
          'high': '高危',
          'medium': '中危',
          'low': '低危'
        };
        const targetLevel = levelMap[this.selectedWarningLevel];
        if (targetLevel) {
          filtered = filtered.filter(item => item.level === targetLevel);
        }
      }

      // 按区域筛选
      if (this.selectedArea !== '全部区域') {
        filtered = filtered.filter(item => item.area === this.selectedArea);
      }

      // 按处理状态筛选
      if (this.selectedStatus !== '全部状态') {
        filtered = filtered.filter(item => item.status === this.selectedStatus);
      }

      // 按时间范围筛选
      const dateRange = this.getDateRange(this.selectedTimeRange);
      if (dateRange) {
        filtered = filtered.filter(item => this.isDateInRange(item.date, dateRange));
      }

      // 按关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        filtered = filtered.filter(item =>
          item.content.toLowerCase().includes(keyword) ||
          item.area.toLowerCase().includes(keyword) ||
          item.location.toLowerCase().includes(keyword) ||
          item.source.toLowerCase().includes(keyword)
        );
      }

      return filtered;
    }
  },
  mounted() {
    this.initWarningTrendChart();
    this.initWarningSourceChart();
    this.initWarningStatusChart();
    // 响应窗口大小变化
    window.addEventListener('resize', this.handleResize)
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    document.removeEventListener('click', this.handleClickOutside)
  },

  methods: {
     // 重置分页到第一页
    resetWarningPagination() {
      this.warningCurrentPage = 1;
    },
    
    resetProcessingPagination() {
      this.processingCurrentPage = 1;
    },
    filterProcessingRecords() {
      this.appliedProcessingSearchKeyword = this.processingSearchKeyword;
    },
     // 更新图表数据的方法
    updateCharts() {
      this.updateWarningTrendChart();
      this.updateWarningSourceChart();
      this.updateWarningStatusChart();
    },
    
    // 更新趋势图
    updateWarningTrendChart() {
      const chart = echarts.getInstanceByDom(this.$refs.warningTrendChart);
      if (!chart) return;
      
      // 根据选择的时间周期生成不同的数据
      let xAxisData, seriesData;
      
      switch (this.selectedChartPeriod) {
        case '30days':
          xAxisData = Array.from({ length: 30 }, (_, i) => `6/${i + 1}`);
          seriesData = {
            high: Array.from({ length: 30 }, () => Math.floor(Math.random() * 10) + 1),
            medium: Array.from({ length: 30 }, () => Math.floor(Math.random() * 15) + 5),
            low: Array.from({ length: 30 }, () => Math.floor(Math.random() * 20) + 10),
            rate: Array.from({ length: 30 }, () => Math.floor(Math.random() * 40) + 60)
          };
          break;
        case '90days':
          // 修复：生成最近3个月的月份数据
          const now = new Date();
          xAxisData = [];
          for (let i = 2; i >= 0; i--) {
            const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
            xAxisData.push(`${date.getMonth() + 1}月`);
          }
          seriesData = {
            high: Array.from({ length: 3 }, () => Math.floor(Math.random() * 30) + 10),
            medium: Array.from({ length: 3 }, () => Math.floor(Math.random() * 40) + 20),
            low: Array.from({ length: 3 }, () => Math.floor(Math.random() * 50) + 30),
            rate: Array.from({ length: 3 }, () => Math.floor(Math.random() * 30) + 65)
          };
          break;
        case '1year':
          xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
          seriesData = {
            high: [40, 38, 42, 35, 45, 50, 48, 42, 38, 40, 45, 43],
            medium: [65, 62, 68, 70, 75, 80, 78, 72, 68, 70, 75, 73],
            low: [90, 85, 95, 100, 110, 120, 115, 105, 100, 95, 105, 100],
            rate: [75, 78, 80, 82, 79, 77, 76, 78, 80, 82, 81, 79]
          };
          break;
        default: // 7days
          xAxisData = ['7/2', '7/3', '7/4', '7/5', '7/6', '7/7', '7/8'];
          seriesData = {
            high: [5, 4, 6, 3, 5, 4, 3],
            medium: [7, 6, 9, 5, 8, 7, 6],
            low: [8, 7, 10, 6, 9, 8, 7],
            rate: [75, 82, 68, 90, 85, 78, 65]
          };
      }
      
      const option = {
        xAxis: [{ data: xAxisData }],
        series: [
          { data: seriesData.high },
          { data: seriesData.medium },
          { data: seriesData.low },
          { data: seriesData.rate }
        ]
      };
      
      chart.setOption(option);
    },
    
    // 更新来源饼图
    updateWarningSourceChart() {
      const chart = echarts.getInstanceByDom(this.$refs.warningSourceChart);
      if (!chart) return;
      
      // 根据周期调整数据
      let sourceData;
      switch (this.selectedChartPeriod) {
        case '30days':
          sourceData = [
            { value: 120, name: '设备监测', itemStyle: { color: '#3182ce' } },
            { value: 85, name: '安全巡检', itemStyle: { color: '#38b2ac' } },
            { value: 55, name: '环境监测', itemStyle: { color: '#48bb78' } },
            { value: 25, name: '人工上报', itemStyle: { color: '#ed8936' } },
            { value: 15, name: '其他来源', itemStyle: { color: '#a0aec0' } }
          ];
          break;
        case '90days':
          // 修复：调整90天的数据值
          sourceData = [
            { value: 360, name: '设备监测', itemStyle: { color: '#3182ce' } },
            { value: 250, name: '安全巡检', itemStyle: { color: '#38b2ac' } },
            { value: 160, name: '环境监测', itemStyle: { color: '#48bb78' } },
            { value: 75, name: '人工上报', itemStyle: { color: '#ed8936' } },
            { value: 45, name: '其他来源', itemStyle: { color: '#a0aec0' } }
          ];
          break;
        case '1year':
          sourceData = [
            { value: 1460, name: '设备监测', itemStyle: { color: '#3182ce' } },
            { value: 1020, name: '安全巡检', itemStyle: { color: '#38b2ac' } },
            { value: 650, name: '环境监测', itemStyle: { color: '#48bb78' } },
            { value: 300, name: '人工上报', itemStyle: { color: '#ed8936' } },
            { value: 180, name: '其他来源', itemStyle: { color: '#a0aec0' } }
          ];
          break;
        default: // 7days
          sourceData = [
            { value: 42, name: '设备监测', itemStyle: { color: '#3182ce' } },
            { value: 28, name: '安全巡检', itemStyle: { color: '#38b2ac' } },
            { value: 18, name: '环境监测', itemStyle: { color: '#48bb78' } },
            { value: 8, name: '人工上报', itemStyle: { color: '#ed8936' } },
            { value: 4, name: '其他来源', itemStyle: { color: '#a0aec0' } }
          ];
      }
      
      const option = {
        series: [{
          data: sourceData
        }]
      };
      
      chart.setOption(option);
    },
    
    // 更新状态柱状图
    updateWarningStatusChart() {
      const chart = echarts.getInstanceByDom(this.$refs.warningStatusChart);
      if (!chart) return;
      
      // 根据周期调整数据
      let statusData;
      switch (this.selectedChartPeriod) {
        case '30days':
          statusData = [
            { value: 180, itemStyle: { color: '#48bb78' } },
            { value: 100, itemStyle: { color: '#3182ce' } },
            { value: 75, itemStyle: { color: '#ed8936' } },
            { value: 20, itemStyle: { color: '#a0aec0' } }
          ];
          break;
        case '90days':
          // 修复：调整90天的数据值
          statusData = [
            { value: 540, itemStyle: { color: '#48bb78' } },
            { value: 300, itemStyle: { color: '#3182ce' } },
            { value: 225, itemStyle: { color: '#ed8936' } },
            { value: 60, itemStyle: { color: '#a0aec0' } }
          ];
          break;
        case '1year':
          statusData = [
            { value: 2190, itemStyle: { color: '#48bb78' } },
            { value: 1200, itemStyle: { color: '#3182ce' } },
            { value: 900, itemStyle: { color: '#ed8936' } },
            { value: 240, itemStyle: { color: '#a0aec0' } }
          ];
          break;
        default: // 7days
          statusData = [
            { value: 42, itemStyle: { color: '#48bb78' } },
            { value: 25, itemStyle: { color: '#3182ce' } },
            { value: 18, itemStyle: { color: '#ed8936' } },
            { value: 5, itemStyle: { color: '#a0aec0' } }
          ];
      }
      
      const option = {
        series: [{
          data: statusData
        }]
      };
      
      chart.setOption(option);
    },
    
    // 监听预警级别切换
    handleWarningLevelChange(level) {
      this.selectedWarningLevel = level;
    },
    
    // 监听图表周期切换
    handleChartPeriodChange(period) {
      this.selectedChartPeriod = period;
      this.$nextTick(() => {
        this.updateCharts();
      });
    },
    // 显示处理预警模态框（从外部按钮调用）
    showProcessWarningModal(warning) {
      this.selectedWarning = warning;
      // 关闭详情模态框
      this.showDetailModal = false;
      // 显示处理模态框
      this.$nextTick(() => {
        this.showProcessModal = true;
      });
    },

    // 显示推送预警模态框（从外部按钮调用）
    showPushWarningModal(warning) {
      this.selectedWarning = warning;
      // 关闭详情模态框
      this.showDetailModal = false;
      // 显示推送模态框
      this.$nextTick(() => {
        this.showPushModal = true;
      });
    },

    // 从详情模态框内调用处理预警（保持详情模态框打开）
    showProcessWarningModalFromDetail(warning) {
      this.selectedWarning = warning;
      this.showProcessModal = true;
    },

    // 从详情模态框内调用推送预警（保持详情模态框打开）
    showPushWarningModalFromDetail(warning) {
      this.selectedWarning = warning;
      this.showPushModal = true;
    },

    // 导出预警数据
    exportWarningData() {
      try {
        // 获取筛选后的数据
        const dataToExport = this.filteredWarningList;
        
        if (dataToExport.length === 0) {
          ElMessage.error('没有可导出的数据！请检查筛选条件。');
          return;
        }

        // 准备CSV数据
        const csvData = dataToExport.map((warning, index) => ({
          '序号': index + 1,
          '预警等级': warning.level,
          '预警内容': warning.content,
          '来源': warning.source,
          '区域': warning.area,
          '具体位置': warning.location,
          '发生时间': warning.time,
          '发生日期': warning.date,
          '处理状态': warning.status,
          '责任人': warning.responsible || '未分配'
        }));

        // 创建CSV内容
        const headers = Object.keys(csvData[0]);
        const csvContent = [
          headers.join(','),
          ...csvData.map(row => 
            headers.map(header => `"${row[header] || ''}"`).join(',')
          )
        ].join('\n');

        // 添加BOM以支持中文
        const BOM = '\uFEFF';
        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
        
        // 创建下载链接
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        
        // 生成文件名
        const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
        const filename = `预警信息列表_${timestamp}.csv`;
        link.setAttribute('download', filename);
        
        // 触发下载
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // 显示成功消息
        this.showSuccessMessage(`预警数据导出成功！\n共导出 ${dataToExport.length} 条记录\n文件名：${filename}`);
        
      } catch (error) {
        ElMessage.error('导出失败，请重试！');
      }
    },

    // 导出处理记录
    exportProcessingRecord(record) {
      try {
        // 准备CSV数据
        const csvData = [{
          '预警内容': record.content,
          '区域': record.area,
          '预警时间': record.time,
          '处理人员': record.processor,
          '处理部门': record.department,
          '处理日期': record.processDate,
          '处理时间': record.processTime,
          '处理方法': record.method,
          '处理结果': record.result
        }];

        // 创建CSV内容
        const headers = Object.keys(csvData[0]);
        const csvContent = [
          headers.join(','),
          ...csvData.map(row => 
            headers.map(header => `"${row[header] || ''}"`).join(',')
          )
        ].join('\n');

        // 添加BOM以支持中文
        const BOM = '\uFEFF';
        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
        
        // 创建下载链接
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        
        // 生成文件名
        const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
        const contentPreview = record.content.substring(0, 20);
        const filename = `处理记录_${contentPreview}_${timestamp}.csv`;
        link.setAttribute('download', filename);
        
        // 触发下载
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // 显示成功消息
        this.showSuccessMessage(`处理记录导出成功！\n文件名：${filename}`);
        
      } catch (error) {
        ElMessage.error('导出失败，请重试！');
      }
    },

    // 导出所有处理记录
    exportAllProcessingRecords() {
      try {
        // 获取当前显示的处理记录（经过筛选的）
        const dataToExport = this.displayedProcessingRecords;
        
        if (dataToExport.length === 0) {
          ElMessage.error('没有可导出的处理记录！请检查筛选条件。');
          return;
        }

        // 准备CSV数据
        const csvData = dataToExport.map((record, index) => ({
          '序号': index + 1,
          '预警内容': record.content,
          '区域': record.area,
          '预警时间': record.time,
          '处理人员': record.processor,
          '处理部门': record.department,
          '处理日期': record.processDate,
          '处理时间': record.processTime,
          '处理方法': record.method,
          '处理结果': record.result
        }));

        // 创建CSV内容
        const headers = Object.keys(csvData[0]);
        const csvContent = [
          headers.join(','),
          ...csvData.map(row => 
            headers.map(header => `"${row[header] || ''}"`).join(',')
          )
        ].join('\n');

        // 添加BOM以支持中文
        const BOM = '\uFEFF';
        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
        
        // 创建下载链接
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        
        // 生成文件名
        const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
        const filename = `预警处理记录列表_${timestamp}.csv`;
        link.setAttribute('download', filename);
        
        // 触发下载
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // 显示成功消息
        this.showSuccessMessage(`处理记录导出成功！\n共导出 ${dataToExport.length} 条记录\n文件名：${filename}`);
        
      } catch (error) {
        ElMessage.error('导出失败，请重试！');
      }
    },

    // 显示成功消息
    showSuccessMessage(message) {
      // 创建提示元素
      const successTip = document.createElement('div');
      successTip.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
      successTip.innerHTML = `
        <div class="flex items-center">
          <i class="fas fa-check-circle mr-2"></i>
          <span>${message}</span>
        </div>
      `;
      document.body.appendChild(successTip);

      // 3秒后移除提示
      setTimeout(() => {
        if (document.body.contains(successTip)) {
          document.body.removeChild(successTip);
        }
      }, 3000);
    },

    // 修复模态框关闭问题
    closeAddWarningModal() {
      this.showAddWarningModal = false;
    },
    // 切换区域下拉菜单
    toggleAreaDropdown() {
      this.showAreaDropdown = !this.showAreaDropdown;
      // 关闭其他下拉菜单
      this.showTimeDropdown = false;
      this.showStatusDropdown = false;
    },

    // 切换时间范围下拉菜单
    toggleTimeDropdown() {
      this.showTimeDropdown = !this.showTimeDropdown;
      // 关闭其他下拉菜单
      this.showAreaDropdown = false;
      this.showStatusDropdown = false;
    },

    // 切换状态下拉菜单
    toggleStatusDropdown() {
      this.showStatusDropdown = !this.showStatusDropdown;
      // 关闭其他下拉菜单
      this.showAreaDropdown = false;
      this.showTimeDropdown = false;
    },

    // 点击外部关闭下拉菜单
    handleClickOutside(event) {
      if (!event.target.closest('.relative')) {
        this.showAreaDropdown = false;
        this.showTimeDropdown = false;
        this.showStatusDropdown = false;
      }
    },

    // 选择区域
    selectArea(area) {
      this.selectedArea = area;
      this.showAreaDropdown = false;
    },

    // 选择时间范围
    selectTimeRange(range) {
      this.selectedTimeRange = range;
      this.showTimeDropdown = false;
    },

    // 选择状态
    selectStatus(status) {
      this.selectedStatus = status;
      this.showStatusDropdown = false;
    },

    // 搜索功能
    handleSearch() {
      // 搜索已经在 computed 属性中处理了
      
    },

    // 计算时间范围
    getDateRange(timeRange) {
      const now = new Date();
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      
      switch (timeRange) {
        case '近 7 天':
          const sevenDaysAgo = new Date(today);
          sevenDaysAgo.setDate(today.getDate() - 7);
          return { start: sevenDaysAgo, end: now };
          
        case '近 30 天':
          const thirtyDaysAgo = new Date(today);
          thirtyDaysAgo.setDate(today.getDate() - 30);
          return { start: thirtyDaysAgo, end: now };
          
        case '近 90 天':
          const ninetyDaysAgo = new Date(today);
          ninetyDaysAgo.setDate(today.getDate() - 90);
          return { start: ninetyDaysAgo, end: now };
          
        case '近 1 年':
          const oneYearAgo = new Date(today);
          oneYearAgo.setFullYear(today.getFullYear() - 1);
          return { start: oneYearAgo, end: now };
          
        default:
          return null; // 全部时间或自定义
      }
    },

    // 检查日期是否在范围内
    isDateInRange(dateStr, dateRange) {
      if (!dateRange) return true;
      
      const itemDate = new Date(dateStr);
      return itemDate >= dateRange.start && itemDate <= dateRange.end;
    },

    // 刷新数据（应用筛选条件）
    refreshData() {
      // 重新渲染列表（触发 computed 属性重新计算）
      this.$forceUpdate();

      // 显示刷新成功提示
      const successTip = document.createElement('div');
      successTip.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
      successTip.innerHTML = `
        <div class="flex items-center">
          <i class="fas fa-check-circle mr-2"></i>
          <span>数据刷新成功</span>
        </div>
      `;
      document.body.appendChild(successTip);

      // 3秒后移除提示
      setTimeout(() => {
        if (document.body.contains(successTip)) {
          document.body.removeChild(successTip);
        }
      }, 3000);
    },

    // 重置筛选条件
    resetFilters() {
      // 重置筛选条件
      this.warningLevels.forEach((level, i) => {
        level.active = i === 0; // 只激活"全部"
      });
      this.selectedArea = '全部区域';
      this.selectedTimeRange = '近 1 年';
      this.selectedStatus = '全部状态';
      this.searchKeyword = '';
    },
    showProcessingDetail(record) {
      this.selectedProcessingRecord = record;
      this.showProcessingDetailModal = true;
    },
    handlePushWarning() {
      if (this.pushForm.receivers.length === 0) {
        ElMessage.error('请选择至少一个接收人员');
        return;
      }
      if (this.pushForm.methods.length === 0) {
        ElMessage.error('请选择至少一个推送方式');
        return;
      }
      // 模拟推送操作
      setTimeout(() => {
        // 从预警列表中移除已推送的数据
        if (this.selectedWarning) {
          const index = this.warningList.findIndex(warning => warning.id === this.selectedWarning.id);
          if (index !== -1) {
            this.warningList.splice(index, 1);
          }
        }
        
        // 显示推送成功提示
        const successTip = document.createElement('div');
        successTip.className = 'fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded z-50';
        successTip.innerHTML = `
<div class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>预警信息推送成功</span>
</div>
`;
        document.body.appendChild(successTip);
        // 3秒后移除提示
        setTimeout(() => {
          document.body.removeChild(successTip);
        }, 3000);
        // 重置表单并关闭模态框
        this.pushForm = {
          receivers: [],
          methods: [],
          remarks: ''
        };
        this.showPushModal = false;
        // 清空选中的预警信息
        this.selectedWarning = null;
      }, 1000);
    },
    showWarningDetail(warning) {
      this.selectedWarning = warning;
      this.showDetailModal = true;
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.processForm.attachments.push(file);
      }
      // Reset file input
      event.target.value = '';
    },
    removeAttachment(index) {
      this.processForm.attachments.splice(index, 1);
    },
    handleProcessWarning() {
      if (!this.processForm.method || !this.processForm.description || !this.processForm.result) {
        ElMessage.error('请填写完整的处理信息');
        return;
      }
      const now = new Date();
      const processDate = now.toISOString().split('T')[0];
      const processTime = now.toLocaleTimeString('zh-CN', { hour12: false });
      // 创建新的处理记录
      const newRecord = {
        content: this.selectedWarning.content,
        levelDotClass: this.selectedWarning.level === '高危' ? 'bg-red-600' :
          this.selectedWarning.level === '中危' ? 'bg-orange-600' : 'bg-yellow-600',
        area: this.selectedWarning.area,
        time: `${this.selectedWarning.date} ${this.selectedWarning.time}`,
        processor: '张工程师', // 这里应该是当前登录用户
        department: '设备维护部', // 这里应该是当前用户所属部门
        processDate,
        processTime,
        method: `${this.processForm.method}：${this.processForm.description}`,
        result: this.processForm.result,
        resultClass: this.processForm.result === '已解决' ? 'bg-green-100 text-green-800' :
          this.processForm.result === '部分解决' ? 'bg-yellow-100 text-yellow-800' :
            'bg-red-100 text-red-800'
      };
      // 添加处理记录
      this.processingRecords.unshift(newRecord);
      // 更新预警状态
      const warningIndex = this.warningList.findIndex(w => w.content === this.selectedWarning.content);
      if (warningIndex !== -1) {
        this.warningList[warningIndex].status = this.processForm.result === '已解决' ? '已处理' :
          this.processForm.result === '部分解决' ? '处理中' : '处理中';
        this.warningList[warningIndex].statusClass = this.processForm.result === '已解决' ? 'bg-green-100 text-green-800' :
          this.processForm.result === '部分解决' ? 'bg-yellow-100 text-yellow-800' :
            'bg-blue-100 text-blue-800';
      }
      // 重置表单
      this.processForm = {
        method: '',
        description: '',
        result: '',
        attachments: []
      };
      // 关闭模态框
      this.showProcessModal = false;
    },
    getWarningRecords(warning) {
      return this.processingRecords.filter(record => record.content === warning.content);
    },
    handleAddWarning() {
      if (!this.newWarning.level || !this.newWarning.source || !this.newWarning.content || !this.newWarning.area || !this.newWarning.location) {
        ElMessage.error('请填写完整的预警信息');
        return;
      }
      const now = new Date();
      const date = now.toISOString().split('T')[0];
      const time = now.toLocaleTimeString('zh-CN', { hour12: false });
      const newWarningItem = {
        level: this.newWarning.level,
        levelClass: this.newWarning.level === '高危' ? 'bg-red-100 text-red-800' :
          this.newWarning.level === '中危' ? 'bg-orange-100 text-orange-800' :
            'bg-yellow-100 text-yellow-800',
        source: this.newWarning.source,
        sourceType: this.newWarning.sourceType,
        icon: this.newWarning.source === '设备监测' ? 'fas fa-cogs' :
          this.newWarning.source === '安全巡检' ? 'fas fa-user-hard-hat' : 'fas fa-cloud',
        iconBg: this.newWarning.source === '设备监测' ? 'bg-red-600' :
          this.newWarning.source === '安全巡检' ? 'bg-blue-600' : 'bg-green-600',
        date,
        time,
        content: this.newWarning.content,
        area: this.newWarning.area,
        location: this.newWarning.location,
        status: '待处理',
        statusClass: 'bg-yellow-100 text-yellow-800'
      };
      this.warningList.unshift(newWarningItem);
      this.showAddWarningModal = false;
      // Reset form
      this.newWarning = {
        level: '',
        source: '',
        sourceType: '',
        content: '',
        area: '',
        location: ''
      };
    },
    toggleMenu(index) {
      this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
      // 如果展开了菜单，则将其他菜单收起
      if (this.mainMenus[index].expanded) {
        this.mainMenus.forEach((menu, i) => {
          if (i !== index) {
            menu.expanded = false;
          }
        });
      }
    },
    selectSubmenu(menuIndex, submenuIndex) {
      // 重置所有菜单的激活状态
      this.mainMenus.forEach(menu => {
        menu.active = false;
        menu.subMenus.forEach(submenu => {
          submenu.active = false;
        });
      });
      // 设置当前选中的菜单和子菜单为激活状态
      this.mainMenus[menuIndex].active = true;
      this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
      const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
      if (link) {
        const dest = link.startsWith('/') ? link : `/${link}`;
        this.$router.push(dest);
      }
    },
    toggleWarningLevel(index) {
      if (index === 0) {
        // 如果点击"全部"，则只激活"全部"
        this.warningLevels.forEach((level, i) => {
          level.active = i === 0;
        });
      } else {
        // 如果点击其他级别，则取消"全部"的激活状态
        this.warningLevels[0].active = false;
        // 切换当前点击的级别的激活状态
        this.warningLevels[index].active = !this.warningLevels[index].active;
        // 如果所有具体级别都未激活，则激活"全部"
        const anyActive = this.warningLevels.slice(1).some(level => level.active);
        if (!anyActive) {
          this.warningLevels[0].active = true;
        }
      }
    },
    toggleDepartment(index) {
      this.departments[index].active = !this.departments[index].active;
    },
    toggleSelectedPerson(index) {
      this.selectedPersonnel[index].active = !this.selectedPersonnel[index].active;
    },
    togglePushLevel(index) {
      this.pushLevels[index].active = !this.pushLevels[index].active;
    },
    handleResize() {
      const charts = [
        this.$refs.warningTrendChart,
        this.$refs.warningSourceChart,
        this.$refs.warningStatusChart
      ];
      charts.forEach(ref => {
        if (ref) {
          const chart = echarts.getInstanceByDom(ref);
          if (chart) {
            chart.resize();
          }
        }
      });
    },
    initWarningTrendChart() {
      const chart = echarts.init(this.$refs.warningTrendChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['高危预警', '中危预警', '低危预警', '处理率'],
          top: 0,
          right: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: ['7/2', '7/3', '7/4', '7/5', '7/6', '7/7', '7/8'],
            axisLine: {
              lineStyle: {
                color: '#e2e8f0'
              }
            },
            axisLabel: {
              color: '#718096'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '预警数量',
            min: 0,
            max: 20,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#718096',
              formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                color: '#e2e8f0'
              }
            }
          },
          {
            type: 'value',
            name: '处理率',
            min: 0,
            max: 100,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#718096',
              formatter: '{value}%'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '高危预警',
            type: 'bar',
            stack: 'warning',
            barWidth: '40%',
            itemStyle: {
              color: '#f56565'
            },
            data: [5, 4, 6, 3, 5, 4, 3]
          },
          {
            name: '中危预警',
            type: 'bar',
            stack: 'warning',
            barWidth: '40%',
            itemStyle: {
              color: '#ed8936'
            },
            data: [7, 6, 9, 5, 8, 7, 6]
          },
          {
            name: '低危预警',
            type: 'bar',
            stack: 'warning',
            barWidth: '40%',
            itemStyle: {
              color: '#ecc94b'
            },
            data: [8, 7, 10, 6, 9, 8, 7]
          },
          {
            name: '处理率',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: '#3182ce'
            },
            itemStyle: {
              color: '#3182ce'
            },
            data: [75, 82, 68, 90, 85, 78, 65]
          }
        ]
      };
      chart.setOption(option);
    },
    initWarningSourceChart() {
      const chart = echarts.init(this.$refs.warningSourceChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['设备监测', '安全巡检', '环境监测', '人工上报', '其他来源']
        },
        series: [
          {
            name: '预警来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 42, name: '设备监测', itemStyle: { color: '#3182ce' } },
              { value: 28, name: '安全巡检', itemStyle: { color: '#38b2ac' } },
              { value: 18, name: '环境监测', itemStyle: { color: '#48bb78' } },
              { value: 8, name: '人工上报', itemStyle: { color: '#ed8936' } },
              { value: 4, name: '其他来源', itemStyle: { color: '#a0aec0' } }
            ]
          }
        ]
      };
      chart.setOption(option);
    },
    initWarningStatusChart() {
      const chart = echarts.init(this.$refs.warningStatusChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#718096'
          },
          splitLine: {
            lineStyle: {
              color: '#e2e8f0'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['已解决', '处理中', '待处理', '已忽略'],
          axisLine: {
            lineStyle: {
              color: '#e2e8f0'
            }
          },
          axisLabel: {
            color: '#718096'
          }
        },
        series: [
          {
            name: '预警数量',
            type: 'bar',
            barWidth: '60%',
            data: [
              { value: 42, itemStyle: { color: '#48bb78' } },
              { value: 25, itemStyle: { color: '#3182ce' } },
              { value: 18, itemStyle: { color: '#ed8936' } },
              { value: 5, itemStyle: { color: '#a0aec0' } }
            ],
            label: {
              show: true,
              position: 'right',
              formatter: '{c}'
            }
          }
        ]
      };
      chart.setOption(option);
    }
  },
  watch: {
     // 当筛选条件改变时，重置到第一页
    filteredWarningList() {
      this.resetWarningPagination();
    },
    
    displayedProcessingRecords() {
      this.resetProcessingPagination();
    },
    selectedChartPeriod() {
      this.updateCharts();
    }
  }
};
</script>
<style scoped>
/* 确保模态框不会阻止按钮点击 */
.fixed.inset-0.bg-gray-600.bg-opacity-50 {
  pointer-events: none;
}

.fixed.inset-0.bg-gray-600.bg-opacity-50>* {
  pointer-events: auto;
}

/* 确保按钮可点击 */
.cursor-pointer {
  cursor: pointer !important;
}

/* 自定义样式 */
.toggle-checkbox:checked {
  right: 0;
  border-color: #3182ce;
}

.toggle-checkbox:checked+.toggle-label {
  background-color: #3182ce;
}

.toggle-label {
  transition: background-color 0.3s ease;
}

/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 自定义选择器样式 */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  padding-right: 2rem;
}
</style>